<template>
  <div style="margin-top: 10px">
    <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
    >
      <template #user_name="{ text }">
                <span>
                    <smile-outlined/>
                    {{ text }}
                </span>
      </template>

      <template #grade="{ text }">
                <span>
                    <a-tag :color="text < 20 ? 'green' : text < 30 ? 'yellow' : 'red'">
                        <div v-if="text < 20">
                            <smile-outlined/>
                            {{ text }}
                        </div>
                        <div v-if="(20 <= text) & (30 >= text)">
                            <meh-outlined/>
                            {{ text }}
                        </div>
                        <div v-if="text > 30">
                            <frown-outlined/>
                            {{ text }}
                        </div>
                    </a-tag>
                </span>
      </template>

      <template #expect_time="{ text }">
                <span>
                    <history-outlined/>
                    {{ text }}
                </span>
      </template>

      <template #endtime="{ text }">
                <span>
                    <div>
                        <history-outlined/>
                        {{ text }}
                    </div>
                  <!--
        <div v-if="!(text===null) && text.length>1">
          <history-outlined />
          {{ text }}
        </div>
        <div v-else>
          尚未完成
        </div>
                  -->
                </span>
      </template>

      <template #email="{ text }">
                <span>
                    <mail-outlined/>
                    {{ text }}
                </span>
      </template>

      <template #action="{ record }">
        <a @click="openArrange(record)">安排时间</a>
      </template>
    </a-table>
  </div>
  <a-modal v-model:visible="visible1" title="安排时间" @ok="finishVisitRecord">
    <a-form-item label>
      <a-select
          v-model:value="value"
          show-search
          placeholder="选择一位咨询师"
          style="width: 200px"
          :options="options"
          :filter-option="filterOption"
          @focus="handleFocus"
          @blur="handleBlur"
          @change="handleChange"
      ></a-select>
      <a-select
          placeholder="选择一个地点"
          style="width: 200px"
          @change="handleChangePlace"
      >
        <a-select-option value="class01">class01</a-select-option>
        <a-select-option value="class02">class02</a-select-option>
      </a-select>
    </a-form-item>
    <div v-for="item in consult_list" style="height:30">
      {{ item.count_num }}.
      <a-form-item label>
        <a-date-picker @change="getFreeTime(item)" v-model:value="item.day"/>
        <a-select
            ref="select"
            v-model:value="item.time_id"
            style="width: 120px"
            :options="item.options"
            @focus="focus"
            @change="handleChange2"
        ></a-select>
        <a-button type="default" @click="confirmTime(item)">确认</a-button>
      </a-form-item>
    </div>
  </a-modal>
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {post, setLocalToken} from "@/common";
import {useRouter} from "vue-router";
import {get} from "@/common";
import {message} from "ant-design-vue";
//import {DownloadOutlined} from "";
////////////////////////////////////////////

const columns = [
  {
    dataIndex: "visit_id", //
    title: "初访ID",
    slots: {
      customRender: "visit_id"
    }
  },
  {
    dataIndex: "grade", //
    title: "状况评分",
    slots: {
      customRender: "grade"
    }
  },
  {
    dataIndex: "expect_time", //
    title: "期望时间",
    slots: {
      customRender: "expect_time"
    }
  },
  {
    dataIndex: "endtime", //
    title: "初访完成时间",
    slots: {
      customRender: "endtime"
    }
  },
  {
    dataIndex: "status", //
    title: "状态",
    slots: {
      customRender: "status"
    }
  },
  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action"
    }
  }
];

const user = reactive({
  user_id: ""
});

const getInfo = record => {
  postBody.visit_id = record.visit_id;
  ItemVisible.value = true;
  post("/consultor/visitRecord/getVisitInfo", postBody).then(res => {
    if (res.success) {
      ItemData.endtime = res.data[0].endtime;
      ItemData.type = res.data[0].type;
      ItemData.result = res.data[0].result;
    } else {
      message.error("系统错误");
    }
  });
};
const currentConsultant = ref({});

const page = ref({});

const consult_list = ref({});
const visible1 = ref(false);

const ItemVisible = ref(false);

const times = ref([]);

const setCurrentConsultant = () => {
  console.log(item);
};

const handleChange = value => {
  currentConsultant.value = value;
};

const currentPlace = ref({});

const handleChangePlace = value => {
  currentPlace.value = value;
};

const teachers = ref([]);

const firstVisitDto = reactive({
  visit_id: ""
});

const ItemData = reactive({
  result: "",
  endtime: "",
  type: ""
});

const postBody = reactive({
  visit_id: ""
});
///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  }
});

const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;

  post("/assister/consultArrange/checkAllApply", user).then(res => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data.list);
  });
};

getPage(1);

const handleTableChange = (pagi, filters, sorter, {currentDataSource}) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

////////////////////////////////////////////

const closeCard = () => {
  ItemVisible.value = false;
  ItemData.type = "";
  ItemData.result = "";
  ItemData.endtime = "";
};
const current_visit_id = ref({});

const openArrange = record => {
    console.log(record.visit_id);
    visible1.value = true;
    firstVisitDto.visit_id = record.visit_id;
    current_visit_id.value = record.visit_id;
    post("/assister/consultArrange/getAllConsultOfVisit", firstVisitDto).then(
        (res) => {
            //获取咨询信息
            if (res.success) {
                console.log(res);
                consult_list.value = res.data;
            } else {
                message.error("系统错误");
            }
        }
  );
};

const finishVisitRecord = () => {
  var finishArrangeDto = {
    visit_id: current_visit_id.value,
  };
  post("/assister/consultArrange/finishArrange", finishArrangeDto).then(
      res => {
        console.log(res);
        if (res.success) {
          message.success("设置成功")
          visible1.value = false;
          getPage(1);
        } else {
          message.error("尚有未完成的咨询");
        }
      }
  );
};

const getTimes = () => {
  post("/assister/consultArrange/getAllTimes").then(res => {
    if (res.success) {
      times.value = res.data;
    } else {
      message.error("系统错误");
    }
  });
};
const options = ref([]);
const getTeachers = () => {
  post("/assister/consultArrange/getAllTeachers").then(res => {
    if (res.success) {
      teachers.value = res.data;
      options
      console.log("hahahahaha");
      var opp = options.value;
      console.log(opp[2]);
      console.log(opp);
      var tea = teachers.value;
      for (let item of tea) {
        console.log(options);
        opp.push({
          value: item.user_id,
          label: item.user_id
        });
        console.log(opp);
      }
      options.value = opp;
    } else {
      message.error("系统错误");
    }
  });
};
getTeachers();
const checkFreeTimeDto = ref({});
const timeOptions = ref({});
const getFreeTime = item => {
  console.log(currentConsultant);
  checkFreeTimeDto.day = item.day.format("YYYY.MM.DD");
  checkFreeTimeDto.place_name = currentPlace.value;
  checkFreeTimeDto.consultant_id = currentConsultant.value;
  post("/assister/consultArrange/getFreeTime", checkFreeTimeDto).then(res => {
    if (res.success) {
      console.log(res.data.list);
      var kk = [];
      for (let itemm of res.data.list) {
        console.log(itemm);
        kk.push({
          value: itemm.time_id,
          label: itemm.start_time + "-" + itemm.end_time
        });
      }
      item.options = kk
    } else {
      message.error("系统错误");
    }
  });
};


const confirmTime = item => {
  message.info("lalalalalalalalalala");
  console.log(item);
  var fillBlankDto = {
    day: item.day.format("YYYY-MM-DD"),
    time_id: item.time_id,
    visit_id: current_visit_id.value,
    consultant_id: currentConsultant.value,
    count_num: item.count_num,
    place_name: currentPlace.value
  }
  console.log("confirmTime")
  console.log(fillBlankDto)
  post("/assister/consultArrange/fillBlanks", fillBlankDto).then(res => {
    if (res.success) {
      console.log(res.data);
    } else {
      message.error("系统错误");
    }

    //重新获取咨询信息

    post("/assister/consultArrange/getAllConsultOfVisit", {
      visit_id: current_visit_id.value,
    }).then(res => {
          //获取咨询信息
          if (res.success) {
            console.log(res);
            consult_list.value = res.data;
          } else {
            message.error("系统错误");
          }
        }
    );
  });
};
const handleTime = (item, time) => {
  console.log("ininsiunvoinsoinv");
  console.log(item);
  console.log(time);
};
const handleBlur = () => {
  console.log("blur");
};
const handleFocus = () => {
  console.log("focus");
};
const filterOption = (input, option) => {
  return option.value.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
</script>

<style>
</style>